<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/global.css">
  <link rel="stylesheet" href="css/register.css">
  <script type="text/javascript" src="js/register.js"></script>
  <link rel="stylesheet" href="./css/Verification.css">
  <link rel="icon" href="./images/icon.png">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
  <title>注册</title>
  <script>
    // function register() {
    //   //获取name和pwd的值
    //   //用dom操作方式或者Jquery
    //   $.ajax({
    //     url: 'http://localhost:3000/api/register',
    //     type: 'post',
    //     data: { username: $('#userName').val(), userPwd: $('#pwd').val },
    //     success: function (result) {
    //       if (result.massage == 'ok') {
    //         alert('注册成功！')
    //         location.href = 'http://localhost:5502/login.html'
    //       } else {
    //         alert('注册失败！')
    //       }
    //     }
    //   })
    // }
    function register() {
      var name = document.querySelector('#username').value
      var pwd = document.querySelector('#pwd').value
      var phonenumber = document.querySelector('#phonenumber').value
      //1.通过AJAX访问服务器接口，进行注册
      $.ajax({
        url: 'http://localhost:3000/api/register',
        type: 'post',
        data: { userName: name, userPwd: pwd ,userMobile: phonenumber},
        success: function (message) {
          if (message = 'ok') {
            //2.跳转到登录页面
            alert('注册成功！')
            location.href = 'http://localhost:5502/login.html'
          } else {
            alert('注册失败！')
          }
        }
      })
      if (checkbox[0].checked != true) {
        alert("请先阅读并同意《用户注册协议》！")
      }
    }
  </script>
</head>

<body>
  <div class="register">
    <div class="container" onsubmit="return checkAll()">
      <h1>新用户注册</h1>
      <form>
        <br>
        <span class="p">*</span>
        <label for="username">用户名</label>
        <input type="text" name="" id="username" placeholder="以字符开头,4-15个字符或者数字" class="registerinput"
          onblur="checkUser()">
        <span id="userInfo"></span><br><br>

        <span class="p">*</span>
        <label for="phonenumber">手机号</label>
        <input type="text" name="" id="phonenumber" class="registerinput" onblur="checknumber()"
          placeholder="以1开头的11位数字">
        <span id="numberInfo"></span><br><br>

        <span class="q">*</span>
        <label for="pwd">登录密码</label>
        <input type="password" name="" id="pwd" class="registerinput" onblur="checkpwd()"
          placeholder="必须包含一个大写,一个小写字母,且长度为8到16位">
        <span id="pwdInfo"></span><br><br>

        <span class="q">*</span>
        <label for="c_pwd">确认密码</label>
        <input type="password" name="" id="c_pwd" class="registerinput" onblur="checkrepwd()" placeholder="请再输入一次密码">
        <span id="c_pwdInfo"></span><br><br>

        <span class="p">*</span>
        <label for="verify">验证码</label>
        <input type="text" id="verify" class="registerinput" name="" onblur="checkverify()">
        <!-- 验证码 -->
        <div class="Verification">
          <div class="codeVesselBox" id="vCodeImg"></div>
          <!-- <div class="iptBox">
              <input id="id" type="text">
              <button onclick="threeFn()">提交</button>
            </div> -->
        </div>
        <script src="./js/Verification.js"></script><br><br>
        <input type="checkbox" class="checkbox" name="">
        <span style="font-size:15px">我已阅读并同意《用户注册协议》</span>
        <br><br>
        <input type="button" name="" value="同意以上协议并注册" class="submit" onclick="register()"><br>
        <a href="index.html" class="left">返回首页</a>
        <a href="login.html" class="right">开始登录</a>
      </form>
    </div>
  </div>
</body>

</html>